<!--
 * @Author: YourName
 * @Date: 2024-05-12 14:14:08
 * @LastEditTime: 2024-05-14 13:49:53
 * @LastEditors: YourName
 * @Description: 
 * @FilePath: \冲锋号影视\src\views\Home\index.vue
 * 版权声明
-->
<template>
    <div style="height: 100%;width: 100%;">
        <div class="bottom">
            <div style="width: 40%;height: 300px;margin-top: 20px;">
                <e-charts :option="pie" />
            </div>
            <div style="width: 40%;height: 300px;margin-top: 20px;">
                <e-charts :option="liqiu" />
                <span style="margin-left: 43%;font-weight: 700;">总量{{ max }}GB</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { mediatotalsize, mediasizeconfig } from '@/apis/home'
let waterList = ref('')
let max = ref('')
let pie = ref({
    title: {
        text: '照片/视频数量',
        left: 'center',
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            type: 'pie',
            radius: '60%',
            data: [
                // 初始数据为空，将被请求的数据填充
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});
const liqiu = ref({
    title: {
        text: '空间使用量',
        left: 'center',
        subtext: '',
        sutext: '共100GB',
    },
    series: [{
        color: ['#86FDFD'],
        type: 'liquidFill',
        data: [], // 水球图的数据，表示三个水球的高度比例
        radius: '100%', // 水球图的半径大小
        outline: {
            show: false,
            borderDistance: 4,//内环宽
            itemStyle: {
                color: '#ffffff',//内环色
                borderColor: '#14297b',//外环色
                borderWidth: 7//外环宽
            }
        },
        backgroundStyle: {
            color: 'rgba(0, 0, 0, 0)' // 背景颜色为透明
        },
        label: {
            show: true, // 是否显示标签
            fontSize: 20, // 标签字体大小
            formatter: function (params) {
                return parseInt(params.value * 10000) / 100 + '%'; // 标签显示百分比
            }
        },
    }],

})
onMounted(async () => {
    await getList();
});
onMounted(async () => {
    await getwaterball();
});
// 饼图数据
// 饼图数据
async function getList() {
    const res = await mediatotalsize();
    const imageItems = res.data.filter(item => item.mediaType.startsWith('image/'));
    const videoItems = res.data.filter(item => item.mediaType === 'video/mp4');

    // 计算图片和视频的 totalSize 和 total
    const totalImageSize = imageItems.reduce((accumulator, current) => {
        return accumulator + current.totalSize;
    }, 0);

    const totalVideoSize = videoItems.reduce((accumulator, current) => {
        return accumulator + current.totalSize;
    }, 0);

    // 创建新数组，包含所有图片类型的 totalSize 累加值
    const newArray = [
        {
            id: 'all-images',
            mediaType: "图片",
            total: imageItems.reduce((accumulator, current) => {
                return accumulator + current.total;
            }, 0),
            totalSize: totalImageSize,
            tenantId: 155,
            companyName: "嘉之勤影视"
        },
        {
            id: 'all-videos',
            mediaType: "视频",
            total: videoItems.reduce((accumulator, current) => {
                return accumulator + current.total;
            }, 0),
            totalSize: totalVideoSize,
            tenantId: 155,
            companyName: "嘉之勤影视"
        }
    ];

    // 更新pie配置中的series数据
    pie.value.series[0].data = newArray.map(item => ({
        value:`${parseFloat(((Number(item.totalSize)) / 1024 /1024).toFixed(2))}`,
        name: item.mediaType
    }));
    pie.value.tooltip.formatter = function (params) {
        var paramName = params.name;
        var paramValue = params.value;
        return `${paramName}: ${paramValue} MB`;
    };
}
// 水球图数据
async function getwaterball() {
    const res = await mediasizeconfig();
    waterList.value = res.data.value;
    max.value = res.data.maxSize / 1024 / 1024 / 1024
    // 计算已使用空间的比例，并保留两位小数
    let usedRatio = (((res.data.usedSize / res.data.maxSize)) * 100);
    console.log("原数据：" + usedRatio)
    let str = String(usedRatio.toString())
    let point = str.indexOf('.');
    console.log('数据', point);

    let sub = str.substring(point, point + 3);
    console.log("小数部分：" + sub)

    let start = str.substring(0, point);
    console.log("整数部分：" + start)

    usedRatio = parseFloat(start + sub);

    console.log(usedRatio);


    // 更新水球图的数据
    liqiu.value.series[0].data = [usedRatio / 100, usedRatio * 0.01, usedRatio * 0.02];

    // 计算剩余空间的百分比，并更新标题中的剩余百分比
    let remainingRatio = (1 - res.data.usedSize / res.data.maxSize) * 100;
    liqiu.value.title.subtext = `剩余${parseFloat(remainingRatio.toFixed(2))}%`;
}

</script>
<style scoped>
.chart {
    height: 300px;
}

.bottom {
    display: flex;
    justify-content: space-between;
    margin: 150px 60px auto 60px;
}
</style>